<template>
  <div class="p-2">
    <a-spin size="large" :spinning="loading">
      <group-search :items="queryInfo" @chartLoad="init" v-if="queryInfo && queryInfo.length > 0" />
      <!-- <a-card style="margin-top:10px;text-align: center;" :title="false"  v-if="chartData.length<=0"> -->
      <!-- <h1 >没有查询到任何数据</h1> -->
      <div v-if="templetData.groups.length <= 0" class="empty-warp">
        <a-empty />
      </div>
      <!-- </a-card> -->
      <div v-else id="printContent">
        <a-card :title="templetData.templet.templetName" :bordered="false">
          <template #extra>
            <a-button type="primary" ghost @click="onPrint" ignore-print="true">打印</a-button>
          </template>
          <a-tabs :defaultActiveKey="0" v-if="templetData.templet.templetStyle === 'tab'">
            <template v-for="(group, index) in templetData.groups" :key="index">
              <a-tab-pane :tab="group.groupTxt">
                <group-template-card v-if="group.groupStyle === 'card'" :group="group" />
                <group-template-tab v-if="group.groupStyle === 'tabs'" :group="group" />
                <group-template-grid v-if="group.groupStyle === 'grid'" :group="group" />
                <group-template-combination v-if="group.groupStyle === 'combination'" :group="group" />
              </a-tab-pane>
            </template>
          </a-tabs>
          <!-- <div v-if="templetData.templet.templetStyle === 'combination'">
        <template v-for="(group,index) in templetData.groups">
          <combination-graphreport-auto-chart :key="index" :style="{marginTop:'10px'}" :group="group"></combination-graphreport-auto-chart>
        </template>
      </div> -->

          <div
            v-if="
              templetData.templet.templetStyle === 'single' ||
              templetData.templet.templetStyle === 'double' ||
              templetData.templet.templetStyle === 'grid'
            "
          >
            <a-row :gutter="24">
              <template v-for="(group, index) in templetData.groups" :key="index">
                <a-col :xl="group.templetGrid.xl" :lg="group.templetGrid.lg" :md="group.templetGrid.md" :sm="group.templetGrid.sm">
                  <group-template-card v-if="group.groupStyle === 'card'" :group="group" />
                  <group-template-tab v-if="group.groupStyle === 'tabs'" :group="group" />
                  <group-template-grid v-if="group.groupStyle === 'grid'" :group="group" />
                  <group-template-combination v-if="group.groupStyle === 'combination'" :group="group" />
                </a-col>
              </template>
            </a-row>
          </div>
        </a-card>
      </div>
    </a-spin>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, unref, computed } from 'vue';
  import GroupTemplateCard from '../components/GroupTemplateCard.vue';
  import GroupTemplateTab from '../components/GroupTemplateTab.vue';
  import GroupTemplateGrid from '../components/GroupTemplateGrid.vue';
  import GroupTemplateCombination from '../components/GroupTemplateCombination.vue';
  import GroupSearch from '../components/GroupSearch.vue';
  import { printJS } from '/@/hooks/web/usePrintJS';
  import { defHttp } from '/@/utils/http/axios';
  import { useRouter, useRoute } from 'vue-router';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'OnlGraphreportTempletAutoChart',
    components: {
      GroupTemplateCombination, // 组合布局
      GroupTemplateCard,
      GroupTemplateGrid,
      GroupTemplateTab,
      GroupSearch,
    },
    props: {},
    setup(props, { emit }) {
      const templetData = ref({
        templet: {},
        groups: [],
      });
      const templetId = ref(''); // 组合图表code
      const loading = ref<boolean>(true);
      const queryInfo = ref<any>([]); // 查询配置
      const queryParams = ref<any>({});
      const dictOptions = ref<any>({});
      const toggleSearchStatus = ref<boolean>(false);

      const router = useRouter();
      const route = useRoute();
      const { createMessage } = useMessage();

      init();

      function details(id) {
        router.push({ path: '/online/graphreport/chart/' + id });
      }

      function init() {
        const url = route.fullPath;
        const id = url.replace('/online/graphreport/templet/', '');
        templetId.value = id;
        loadData(null).then((res) => {
          if (Object.keys(queryParams.value).length) {
            // 判断是否有默认值，有再次刷新
            const queryParams = getQueryParams();
            loadData(queryParams);
          }
        });
      }
      function loadData(queryParam) {
        loading.value = true;
        templetData.value = {
          templet: {},
          groups: [],
        };
        //queryParam中value值转成string,此修改是为了解决前后端签名统一
        let qparams = {};
        for (var key in queryParam) {
          qparams[key] = JSON.stringify(queryParam[key]);
        }
        let params = Object.assign({}, qparams, { id: templetId.value });
        let list = '/api-online/diagram/diagramCombination/getTempletData';
        return defHttp
          .get({ url: list, params }, { isTransformResponse: false })
          .then((res) => {
            if (res.success) {
              templetData.value = res.data;
              templetData.value.groups.forEach((element) => {
                // 栅格配置字段转换为object
                if (element.templetGrid) {
                  element.templetGrid = JSON.parse(element.templetGrid);
                } else {
                  element.templetGrid = getCol(templetData.value.templet.templetStyle, templetData.value.groups.length);
                }
              });

              res.data.queryConfigList.forEach((item) => {
                item.view = item.viewType;
                if (!queryParam) {
                  // 如果是查询调用的方法  不赋值默认值
                  if (!queryParams.value[item.field]) {
                    queryParams.value[item.field] = {};
                  }
                  queryParams.value[item.field].media_id = item.defValue;
                }
              });
              queryInfo.value = res.data.queryConfigList;
            }
            if (res.code === 510) {
              createMessage.warn(res.msg);
            }
          })
          .finally(() => {
            // 这里是无论成功或失败都会执行的方法，在这里关闭loading
            loading.value = false;
          });
      }
      function searchByquery() {
        const queryParam = getQueryParams();
        loadData(queryParam);
      }
      function getQueryParams() {
        // 把查询参数封装为后台需要的参数
        const queryParam = {};
        queryInfo.value.forEach((item) => {
          const key = item.field;
          if (item.mode === 'single') {
            queryParam[key] = {
              value: queryParams[key],
            };
            if (item.view === 'list_multi') {
              // 下拉多选框组装成另外一个格式
              queryParam[key].queryType = 'more';
            } else {
              queryParam[key].queryType = 'single';
            }
          } else {
            queryParam[key] = {
              queryType: 'group',
            };
            queryParam[key].startValue = queryParams[key + '_begin'];
            queryParam[key].endValue = queryParams[key + '_end'];
          }
        });
        return queryParam;
      }
      function searchReset() {
        queryParams.value = {};
        loadData(null);
      }

      function handleToggleSearch() {
        toggleSearchStatus.value = !toggleSearchStatus.value;
      }

      function getCol(templetStyle, groups) {
        if (!groups || groups < 1) {
          groups = 1;
        }
        if (templetStyle === 'single') {
          return { xl: 24, lg: 24, md: 24, sm: 24 };
        } else if (templetStyle === 'double' && groups > 1) {
          return { xl: 12, lg: 12, md: 12, sm: 12 };
        } else if (templetStyle === 'double' && groups <= 1) {
          return { xl: 24, lg: 24, md: 24, sm: 24 };
        }
        return {};
      }

      function onPrint() {
        const style = '@page {margin:0mm 10mm};'; //打印时去掉眉页眉尾
        printJS({
          printable: '#printContent',
          type: 'html',
          header: '',
          targetStyles: ['*'],
          style,
        });
      }

      return {
        templetData,
        loading,
        queryInfo,
        queryParams,
        dictOptions,
        toggleSearchStatus,
        handleToggleSearch,
        searchReset,
        searchByquery,
        init,
        onPrint,
      };
    },
  });
</script>

<style scoped>
  .table-page-search-wrapper {
    margin-top: 10px;
  }
  .table-page-search-wrapper .ant-form-inline .ant-form-item,
  .table-page-search-wrapper .table-page-search-submitButtons {
    margin-bottom: 10px;
  }
</style>
